<script setup>
import {computed, ref} from "vue";
import {message} from 'ant-design-vue';
import moment from 'moment'
let list = ref([{
    text: '干饭，启动!',
    isChecked: false,
    createTime: moment(new Date()).format('yyyy/MM/DD HH:mm:ss'),
    id: 0
}, {text: '欢迎来到王者荣耀', isChecked: false, createTime: moment(new Date()).format('yyyy/MM/DD HH:mm:ss'), id: 1}]);
let addObj = ref({});
let addTxt = ref('');
function addData() {
    if (addTxt.value.trim() !== '') {
        addObj.value = {
            text: addTxt.value,
            isChecked: false.value,
            createTime: moment(new Date()).format('yyyy/MM/DD HH:mm:ss'),
            id:list.value[list.value.length]?.id+1||0,
        }
        list.value.push(addObj.value)
        message.success('添加成功！');
        addTxt.value = '';
        addObj.value = {};
    } else {
        message.error('添加失败，内容不能为空！');
    }
}
let done=computed(()=>{
    return list.value.filter(item => {
        return item.isChecked === true;
    }).length
})
function delData(id) {
    message.success('删除成功！');
    list.value.splice(id, 1);
}
</script>
<template>
    <div class="main" style="margin-top: 50px;position: relative" >
        <img src="../.././public/QQ图片20240411195732.jpg">
        <h1 style="text-align: center;">黄油小熊记事本</h1>
        <h4 style="text-align: center">共{{ list.length}}条记录，已完成{{ done }}条</h4>
        <input type="text" placeholder="请输入需要添加的内容" class="addText" v-model="addTxt">
        <button class="addBtn" @click="addData">添加</button>
        <div class="continue">
            <div v-for="(item,index) in list" :key="index" style="margin-bottom: 10px;position: relative" class="navs">
                <input type="checkbox" class="check" :checked="item.isChecked" v-model="item.isChecked">
                <span v-text="item.text" :class="item.isChecked?'textClass':' '" style="margin-left: 15px" :id="item.id"></span>
                <span v-text="item.createTime" class="time"></span>
                <button class="del" style="float: right" @click="delData(index)">删除</button>
            </div>
        </div>
    </div>
</template>

<style scoped>
.main {
    margin: 0 auto;
    width: 600px;
   border-radius: 30px;
    height: 800px;
    background-color: #fff799;
    //background-image: url('../.././public/QQ图片20240411195732.jpg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding-top: 20px;
    border: 1px solid #ecd452;
    box-shadow: 5px -5px 5px #ecd452;
}
img{
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    right: 50px;
    top: 40px;
}
.continue {
    width: 80%;
    height: 70%;
    border: 1px solid #f59f00;
    border-radius: 10px;
    margin: 30px auto;
    padding: 15px;
}

.addText, .addBtn {
    margin-left: 42px;
    height: 30px;
    width: 200px;
    border-radius: 10px;
    outline: none;
    border: 1px solid #666;
}

.addBtn {
    width: 50px;
    margin-left: 20px;
    cursor: pointer;
}

.textClass {
    text-decoration: line-through;
    font-style: italic;
    font-size: 14px;
    color: #666;
}

.time {
    position: absolute;
    right: 70px;
}
.del{
    height: 100%;
    border: 1px solid #f59f00;
    border-radius: 15px;
    cursor: pointer;
}
.navs{
    height: 30px;
    line-height: 30px;
    cursor: pointer;

}
</style>